<template>
	<view class="empire-cart">
		<view class="empire-cart__head">
			<view class="empire-mall__flex">
				<uni-icons type="map-pin-ellipse" size="22" color="#EE0C0C"></uni-icons>
				<text class="empire-cart__location">{{ location }}</text>
			</view>
			<view class="empire-mall__edit" @click="handleToogleStatus">
				<text v-show="editStatus">完成</text>
				<text v-show="!editStatus">编辑</text>
			</view>
		</view>
		<view class="empire-cart__body">
			<scroll-view class="box-block" :scroll-y="true" :show-scrollbar="false">
				<EmpireCart :editable="editStatus" :list="products" @change="handleChange" @remove="handleRemove" />
			</scroll-view>
		</view>
		<view class="empire-cart__footer">
			<view class="empire-mall__flex-between" :style="{ width: '100%' }">
				<view class="empire-mall__flex">
					<radio :checked="checkedAll" @click="handleCheckAll">全选</radio>
					<view v-if="!editStatus" class="empire-cart__wind">
						<text>已选{{ settleAccount.num }}件，合计：</text>
						<text class="wind">¥{{ settleAccount.total || 0.0 }}</text>
					</view>
				</view>
				<EmpireButton v-if="editStatus" type="warn">移入收藏</EmpireButton>
				<EmpireButton v-else type="warn">去结算</EmpireButton>
			</view>
		</view>
		<EmpirePrompt v-model="visible" message="删除成功"></EmpirePrompt>
	</view>
</template>

<script setup>
import EmpireCart from '@/components/empire-cart';
import EmpireButton from '@/components/empire-button.vue';
import EmpirePrompt from '@/components/empire-prompt.vue';
import { computed, ref, toRefs, onMounted } from 'vue';
import { useAppStore } from '@/store/store.js';

const store = useAppStore();
const editStatus = ref(false);
const location = ref('山东省济南市');
const checkedAll = ref();
const { shopping: products } = toRefs(store);
const bodyHeight = ref();
const visible = ref(false);
const settleAccount = computed(() => {
	return {
		num: products.value.map((item) => (item.checked && 1) || 0).reduce((a, b) => a + b, 0),
		total: products.value.map((item) => (item.checked && item.discount) || 0).reduce((a, b) => a + b, 0)
	};
});
onMounted(() => {
	const { windowHeight } = uni.getWindowInfo();
	bodyHeight.value = `${windowHeight - 32 - 60}px`;
});
function handleToogleStatus() {
	editStatus.value = !editStatus.value;
}
function handleChange(checkList) {
	const unCheckedAll = checkList.some((item) => !item.checked);
	checkedAll.value = !unCheckedAll;
}
function handleRemove(serial) {
	products.value = products.value.filter((item) => item.serial !== serial);
	visible.value = true;
}
function handleCheckAll() {
	checkedAll.value = !checkedAll.value;
	products.value.forEach((item) => {
		item.checked = checkedAll.value;
	});
}
</script>

<style lang="scss" scoped>
.empire-cart__head {
	position: fixed;
	top: 0;
	z-index: 9;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: calc(100% - 40rpx);
	height: 64rpx;
	padding: 0 20rpx;
	border-bottom: 1px solid #e6e6e6;
	background-color: #fff;
}

.empire-mall__edit {
	width: 100rpx;
	text-align: center;
	border-left: 2px solid #e6e6e6;
}
.empire-cart__location {
	margin-left: 10rpx;
}
.empire-cart__body {
	width: 100%;
	height: v-bind(bodyHeight);
	margin-top: 66rpx;
	margin-bottom: 98rpx;
	border-radius: 24rpx;
}
.empire-cart__footer {
	position: fixed;
	bottom: 0;
	z-index: 9;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 98rpx;
	width: calc(100% - 80rpx);
	padding: 0 40rpx;
	background-color: #fff;
	border-bottom: 1px solid #e6e6e6;
}
.empire-cart__wind {
	margin-left: 8rpx;
	font-size: 24rpx;
}
.wind {
	font-size: 32rpx;
	color: #e64340;
}
.fav {
	display: flex;
	align-items: center;
	align-self: center;
	margin-right: 16rpx;
}
.fade {
	transition: opacity 1s ease-in-out;
}
</style>
